import React, { PureComponent } from "react";
import { connect } from "react-redux";
import Home from "components/Home";
import { Flex } from "antd-mobile";
import bg from "assets/images/jian/bg.png";
import zi_top from "assets/images/jian/zi_top.png";
import jinbi from "assets/images/jian/jinbi.png";
import zi_bottom from "assets/images/jian/zi_bottom.png";
import btn from "assets/images/jian/btn.png";
import rulebtn from "assets/images/jian/rulebtn.png";
import shu from "assets/images/jian/shu.png";
import isLogin from "assets/images/jian/isLogin.png";
import jianed from "assets/images/jian/jianed.png";
import yuan from "assets/images/jian/20yuan.png";
import rule from "assets/images/jian/rule.png";
import closeed from "assets/images/jian/closeed.png";
import share from "assets/images/yao/share.png";
import jianedmaxx from "assets/images/jian/jianedmaxx.png";
import jianedto from "assets/images/jian/jianedto.png";

import jgbg from "assets/images/jian/jgbg.png";
import again from "assets/images/jian/again.png";

import loan from "assets/images/jian/loan.png";

import { hashHistory } from "React-Router";
import { callApi } from "app/utils";

import TweenOne from "rc-tween-one";

import s from "./index.scss";
@connect(
  state => ({
    login: state.login
  }),
  {}
)
export default class extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      tree: {
        moment: null,
        paused: true,
        reverse: false
      },
      isLogin: false, //未登录的
      toShare: false, //去分享朋友圈
      successDialog: false, //游戏成功
      rule: false, //活动规则
      friend: false, //分享朋友圈
      limit3: false, //游戏达到上限 3次
      limit5: false, //游戏达到上限 5次
      gameDialog: false, //游戏点击之后弹窗

      gameMoney: "", //每次游戏获得的钱数
      gameNum: "" //剩下的游戏次数
    };
    this.animation = { scale: 0.9, yoyo: true, repeat: -1, duration: 500 };
    this.animationShu = [
      { display: "none" },
      {
        position: "absolute",
        top: "70%",
        duration: 2000,
        display: "block",
        opacity: "0"
      },
      { display: "none" }
    ];
    this.animationYuan = { top: "190px", yoyo: true, repeat: 5, duration: 300 };
  }

  componentDidMount() {
    let that = this;
    if (localStorage.getItem("isLogin") == "true") {
      callApi(
        "/bonus/goldcoin/initpage",
        { token: JSON.parse(localStorage.getItem("userData")).token },
        "POST"
      ).then(data => {
        if (data.success == true) {
          if (data.data.pickCount >= data.data.maxPickCount) {
            that.setState({ limit5: true });
          } else if (data.data.canPlay <= 0) {
            if (data.data.shareFlag == true) {
              that.setState({ limit3: true });
            } else {
              that.setState({
                toShare: true
              });
            }
          }
        }
      });
    }
  }
  onRestart = () => {
    let that = this;
    if (this.props.login.isLogin == false) {
      this.setState({
        isLogin: true
      });
      return;
    } else {
      this.setState(
        {
          tree: {
            paused: false,
            reverse: false,
            moment: 0
          }
        },
        () => {
          
          this.setState({
            tree: {
              paused: false,
              reverse: false,
              moment: null
            }
          });
          setTimeout(()=>{
            callApi(
              "/bonus/goldcoin/add",
              { token: JSON.parse(localStorage.getItem("userData")).token },
              "POST"
            ).then(data => {
              if (data.success == true) {
                that.setState({
                  gameDialog: true,
                  gameMoney: data.data.amount
                });
                callApi(
                  "/bonus/goldcoin/initpage",
                  { token: JSON.parse(localStorage.getItem("userData")).token },
                  "POST"
                ).then(data => {
                  that.setState({
                    gameNum: data.data.canPlay
                  });
                });
              }
            });
          },2000)
         
        }
      );
    }
  };


  render() {
    return (
      <div className={`${s.gameBox}`}>
        <Flex
          style={{
            background: `url(${bg}) no-repeat 100% 100%/100%`,
            height: "87%"
          }}
          direction="column"
          justify="around"
        >
          <div
            className={``}
            style={{
              background: `url(${zi_top}) no-repeat 100% 100%/100%`,
              height: "0.32rem",
              width: "3rem"
            }}
          />
          <div
            className={``}
            style={{
              background: `url(${shu}) no-repeat 100% 100%/100%`,
              height: "3.3rem",
              width: "3rem",
              marginTop: "0.2rem"
            }}
          />
          <div
            className={``}
            style={{
              background: `url(${zi_bottom}) no-repeat 100% 100%/100%`,
              height: "0.24rem",
              width: "1.7rem"
            }}
          />
          <TweenOne
            animation={this.animation}
            paused={this.props.paused}
            style={{ transform: "scale(1)" }}
          >
            <div
              className={``}
              style={{
                background: `url(${btn}) no-repeat 100% 100%/95%`,
                height: "0.8rem",
                width: "0.8rem"
              }}
              onClick={this.onRestart.bind(this)}
            />
          </TweenOne>
          <TweenOne
            animation={this.animationShu}
            paused={this.state.tree.paused}
            reverse={this.state.tree.reverse}
            moment={this.state.tree.moment}
            style={{
              background: `url(${jinbi}) no-repeat 100% 100%/95%`,
              height: "1.48rem",
              width: "3rem",
              position: "absolute",
              top: "1rem",
              display: "none"
            }}
          />
        </Flex>
        <Flex className={`${s.bot}`} direction="row" justify="end">
          <div
            className={``}
            style={{
              background: `url(${rulebtn}) no-repeat 100% 100%/95%`,
              height: "0.16rem",
              width: "0.82rem",
              marginRight: "0.2rem"
            }}
            onClick={()=>{
              this.setState({
                rule:true
              })
            }}
          />
        </Flex>
        {/* 未登录弹窗 */}
        {this.state.isLogin ? (
          <Flex
            align="center"
            justify="center"
            style={{
              height: "100vh",
              width: "100%",
              background: "rgba(0,0,0,.5)",
              position: "absolute",
              top: 0,
              zIndex: 10
            }}
          >
            <div
              className={``}
              style={{
                background: `url(${isLogin}) no-repeat 100% 100%/95%`,
                height: "3.27rem",
                width: "3rem",
                position: "relative"
              }}
            >
              <div
                style={{
                  width: "1.11rem",
                  height: "0.4rem",
                  position: "absolute",
                  top: "2rem",
                  left: "0.4rem"
                }}
                onClick={() => {
                  hashHistory.push("/login");
                }}
              />
              <div
                style={{
                  width: "1.11rem",
                  height: "0.4rem",
                  position: "absolute",
                  top: "2rem",
                  left: "1.6rem"
                }}
                onClick={() => {
                  hashHistory.push("/register");
                }}
              />
            </div>
          </Flex>
        ) : null}
        {/* 未登录弹窗 */}
        {/* 去分享弹窗 */}
        {this.state.toShare ? (
          <Flex
            align="center"
            justify="center"
            style={{
              height: "100vh",
              width: "100%",
              background: "rgba(0,0,0,.5)",
              position: "absolute",
              top: 0,
              zIndex: 10
            }}
          >
            <div
              className={``}
              style={{
                background: `url(${jianed}) no-repeat 100% 100%/95%`,
                height: "3.37rem",
                width: "3rem",
                position: "relative"
              }}
            >
              <span
                style={{
                  fontSize: "0.2rem",
                  color: "#FFFF4D",
                  position: "absolute",
                  left: "1.82rem",
                  top: "1.12rem"
                }}
              >
                3
              </span>

              <span
                style={{
                  fontSize: "0.2rem",
                  color: "#26C9FF",
                  position: "absolute",
                  left: "1.55rem",
                  top: "1.75rem"
                }}
              >
                2
              </span>

              <TweenOne
                animation={this.animationYuan}
                style={{
                  position: "absolute",
                  width: "0.5rem",
                  height: "0.5rem",
                  left: "1.35rem",
                  top: "2rem"
                }}
              >
                <img src={yuan} style={{ width: "0.5rem", height: "0.5rem" }} />
              </TweenOne>
              <div
                style={{
                  width: "1.4rem",
                  height: "0.4rem",
                  position: "absolute",
                  top: "2.7rem",
                  left: "0.9rem"
                }}
                onClick={() => {
                  this.setState({ friend: true });
                }}
              />
            </div>
            <span
              style={{
                color: "#fbd275",
                fontSize: "0.14rem",
                textDecoration: "underline",
                position: "absolute",
                bottom: "0.2rem",
                left: "0.2rem"
              }}
              onClick={() => {
                this.setState({
                  rule: true
                });
              }}
            >
              活动规则
            </span>
            <span
              style={{
                color: "#fbd275",
                fontSize: "0.14rem",
                textDecoration: "underline",
                position: "absolute",
                bottom: "0.2rem",
                right: "0.2rem"
              }}
              onClick={() => {
                hashHistory.push("/");
              }}
            >
              返回安心投
            </span>
          </Flex>
        ) : null}
        {/* 去分享弹窗 */}
        {/* 活动规则弹窗 */}
        {this.state.rule ? (
          <Flex
            align="center"
            justify="center"
            style={{
              height: "100vh",
              width: "100%",
              background: "rgba(0,0,0,.5)",
              position: "absolute",
              top: 0,
              zIndex: 11
            }}
          >
            <div
              className={``}
              style={{
                background: `url(${rule}) no-repeat 100% 100%/100%`,
                height: "3.1rem",
                width: "3.6rem",
                position: "relative"
              }}
            >
              <span
                style={{
                  color: "#FD5B5E",
                  fontSize: "0.2rem",
                  position: "absolute",
                  textAlign: "center",
                  top: "1.35rem",
                  left: "2.3rem"
                }}
              >
                ?
              </span>
              <span
                style={{
                  color: "#FD5B5E",
                  fontSize: "0.2rem",
                  position: "absolute",
                  textAlign: "center",
                  top: "1.8rem",
                  left: "2.3rem"
                }}
              >
                ?
              </span>
            </div>

            <span
              style={{
                color: "#fbd275",
                fontSize: "0.12rem",
                textDecoration: "underline",
                position: "absolute",
                width: "100%",
                textAlign: "center",
                bottom: "0.2rem"
              }}
            >
              *本次活动最终解释权归北京放心科技服务有限公司所有
            </span>
            <img
              src={closeed}
              style={{
                width: "0.3rem",
                height: "0.3rem",
                position: "absolute",
                top: "1rem",
                right: "0.4rem"
              }}
              onClick={() => {
                this.setState({
                  rule: false
                });
              }}
            />
          </Flex>
        ) : null}
        {/* 活动规则弹窗 */}
        {/* 游戏点击之后弹窗  */}
        {this.state.gameDialog ? (
          <Flex
            align="center"
            justify="center"
            style={{
              height: "100vh",
              width: "100%",
              background: "rgba(0,0,0,.5)",
              position: "absolute",
              top: 0,
              zIndex: 10
            }}
          >
            <div
              className={``}
              style={{
                background: `url(${jgbg}) no-repeat 100% 100%/95%`,
                height: "3.37rem",
                width: "3rem",
                position: "relative"
              }}
            >
              <span
                style={{
                  fontSize: "0.2rem",
                  color: "#FFFF4D",
                  position: "absolute",
                  left: "1.3rem",
                  top: "1.7rem",
                  textAlign:'center',
                  display:'inline-block',
                  width:'0.5rem'
                }}
              >
                {this.state.gameMoney}
              </span>

              <span
                style={{
                  fontSize: "0.2rem",
                  color: "#FFFF4D",
                  position: "absolute",
                  left: "1.9rem",
                  top: "2.5rem"
                }}
              >
                {this.state.gameNum}
              </span>

              <div
                style={{
                  position: "absolute",
                  width: "100%",
                  height: "0.5rem",
                  left: "0",
                  top: "2rem"
                }}
              >
                <img
                  src={again}
                  style={{
                    width: "1.08rem",
                    height: "0.32rem",
                    position: "absolute",
                    left: "0.3rem"
                  }}
                  onClick={() => {
                    this.setState({
                      gameDialog: false
                    });
                  }}
                />
                <img
                  src={loan}
                  style={{
                    width: "1.08rem",
                    height: "0.32rem",
                    position: "absolute",
                    left: "1.7rem"
                  }}
                  onClick={() => {
                   
                    hashHistory.push("/projectList");
                  }}
                />
              </div>

              <div
                style={{
                  textDecoration: "underline",
                  position: "absolute",
                  width: "100%",
                  textAlign: "center",
                  left: "0",
                  top: "3rem",
                  color: "#FFFF4D"
                }}
                onClick={()=>{
                  hashHistory.push('/my/myRewards')
                }}
              >
                查看我的金币
              </div>
            </div>
            <span
              style={{
                color: "#fbd275",
                fontSize: "0.14rem",
                textDecoration: "underline",
                position: "absolute",
                bottom: "0.2rem",
                left: "0.2rem"
              }}
              onClick={() => {
                this.setState({
                  rule: true
                });
              }}
            >
              活动规则
            </span>
            <span
              style={{
                color: "#fbd275",
                fontSize: "0.14rem",
                textDecoration: "underline",
                position: "absolute",
                bottom: "0.2rem",
                right: "0.2rem"
              }}
              onClick={() => {
                hashHistory.push("/");
              }}
            >
              返回安心投
            </span>
          </Flex>
        ) : null}
        {/* 游戏点击之后弹窗 */}

        {/* 朋友圈弹窗 */}
        {this.state.friend ? (
          <Flex
            align="center"
            justify="center"
            style={{
              height: "100vh",
              width: "100%",
              background: "rgba(0,0,0,.5)",
              position: "absolute",
              top: 0,
              zIndex: 11
            }}
            onClick={() => {
              this.setState({ friend: false });
            }}
          >
            <div
              className={``}
              style={{
                background: `url(${share}) no-repeat 100% 100%/100%`,
                height: "1.49rem",
                width: "2.6rem",
                position: "absolute",
                right: "0.1rem",
                top: "0.1rem"
              }}
            />
          </Flex>
        ) : null}
        {/* 朋友圈弹窗 */}
        {/* 游戏次数达到上限弹窗 3次 */}
        {this.state.limit3 ? (
          <Flex
            align="center"
            justify="center"
            style={{
              height: "100vh",
              width: "100%",
              background: "rgba(0,0,0,.5)",
              position: "absolute",
              top: 0,
              zIndex: 10
            }}
          >
            <div
              className={``}
              style={{
                background: `url(${jianedmaxx}) no-repeat 100% 100%/100%`,
                height: "3.3rem",
                width: "3rem",
                position: "relative"
              }}
            >
              <span
                style={{
                  fontSize: "0.2rem",
                  color: "#FFFF4D",
                  position: "absolute",
                  left: "2.03rem",
                  top: "1.25rem"
                }}
              >
                5
              </span>

              <div
                style={{
                  width: "1.6rem",
                  height: "0.4rem",
                  position: "absolute",
                  top: "2.3rem",
                  left: "0.7rem"
                }}
                onClick={() => {
                  hashHistory.push("/my/myRewards");
                }}
              />
            </div>
          </Flex>
        ) : null}
        {/* 游戏次数达到上限弹窗3次 */}

        {/* 游戏次数达到上限弹窗 5次 */}
        {this.state.limit5 ? (
          <Flex
            align="center"
            justify="center"
            style={{
              height: "100vh",
              width: "100%",
              background: "rgba(0,0,0,.5)",
              position: "absolute",
              top: 0,
              zIndex: 10
            }}
          >
            <div
              className={``}
              style={{
                background: `url(${jianedto}) no-repeat 100% 100%/100%`,
                height: "3.3rem",
                width: "3rem",
                position: "relative"
              }}
            >
              <div
                style={{
                  width: "1.6rem",
                  height: "0.4rem",
                  position: "absolute",
                  top: "2.3rem",
                  left: "0.7rem"
                }}
                onClick={() => {
                  this.setState({
                    friend: true
                  });
                }}
              />
            </div>
          </Flex>
        ) : null}
        {/* 游戏次数达到上限弹窗5次 */}
      </div>
    );
  }
}
